<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
	Web Data Modeller, Faghmie Jamiel Davids
	Version: 0.1
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Web Data Modeller</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="styles/style.css" media="all" />
	<!--[if IE 6]><link rel="stylesheet" type="text/css" href="styles/ie6.css" /><![endif]-->
	<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styles/ie7.css" /><![endif]-->


	<!-- JQUERY -->
	<script src="boiler_plate/js/libs/jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
	<script src="boiler_plate/js/libs/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.2.custom.js"></script>
	<link rel="stylesheet" href="boiler_plate/js/libs/jquery-ui-1.9.1.custom/themes/absolution/jquery-ui.css" />

	<script src="boiler_plate/js/libs/jquery.te/jquery-te-1.4.0.min.js"></script>
	<link rel="stylesheet" href="boiler_plate/js/libs/jquery.te/jquery-te-1.4.0.css" type="text/css" media="print, projection, screen" />

	
	<script src="boiler_plate/js/libs/jquery.tablesorter/jquery.tablesorter.js"></script>
	<link rel="stylesheet" href="boiler_plate/js/libs/jquery.tablesorter/themes/blue/style.css" type="text/css" media="print, projection, screen" />

	<!-- JS-PLUMB -->
	<script src="js/jsPlumb/lib/jquery.ui.touch-punch.min.js"></script>

	<!-- support lib for bezier stuff -->
	<script src="js/jsPlumb/lib/jsBezier-0.6.js"></script>
	<!-- jsplumb util -->
	<script src="js/jsPlumb/src/jsPlumb-util.js"></script>
	<!-- base DOM adapter -->
	<script src="js/jsPlumb/src/jsPlumb-dom-adapter.js"></script>
	<!-- jsplumb drag-->
	<script src="js/jsPlumb/src/jsPlumb-drag.js"></script>
	<!-- main jsplumb engine -->
	<script src="js/jsPlumb/src/jsPlumb.js"></script>
	<!-- endpoint -->
	<script src="js/jsPlumb/src/jsPlumb-endpoint.js"></script>
	<!-- connection -->
	<script src="js/jsPlumb/src/jsPlumb-connection.js"></script>
	<!-- anchors -->
	<script src="js/jsPlumb/src/jsPlumb-anchors.js"></script>
	<!-- connectors, endpoint and overlays  -->
	<script src="js/jsPlumb/src/jsPlumb-defaults.js"></script>
	<!-- state machine connectors -->
	<script src="js/jsPlumb/src/jsPlumb-connectors-statemachine.js"></script>
	<!-- flowchart connectors -->
	<script src="js/jsPlumb/src/jsPlumb-connectors-flowchart.js"></script>
	<!-- SVG renderer -->
	<script src="js/jsPlumb/src/jsPlumb-renderers-svg.js"></script>
	<!-- canvas renderer -->
	<script src="js/jsPlumb/src/jsPlumb-renderers-canvas.js"></script>
	<!-- vml renderer -->
	<script src="js/jsPlumb/src/jsPlumb-renderers-vml.js"></script>

	<!-- jquery jsPlumb adapter -->
	<script src="js/jsPlumb/src/jquery.jsPlumb.js"></script>
	<!-- /JS-PLUMB -->
	
	<script src="boiler_plate/js/libs/jquery.blockUI.js"></script>
	<script src="boiler_plate/js/libs/jquery.json-2.4.js"></script>
	<script src="boiler_plate/js/libs/jquery.form.js" type="text/javascript"></script>

	<!--DYNAMIC FORM/EDITOR -->
	<script type="text/javascript" src="boiler_plate/js/libs/jquery.json-2.4.js"></script>
	<script type="text/javascript" src="boiler_plate/js/utils.js"></script>
	<script type="text/javascript" src="boiler_plate/js/fd_panel.js"></script>
	<script type="text/javascript" src="boiler_plate/js/fd_application.js"></script>
	<script type="text/javascript" src="boiler_plate/js/form_helper.js"></script>
	<script type="text/javascript" src="boiler_plate/js/lookup_forms.js"></script>
	<script type="text/javascript" src="boiler_plate/js/lookup_report.js"></script>
	<script type="text/javascript" src="boiler_plate/js/lookup_editors.js"></script>
	<script type="text/javascript" src="boiler_plate/js/import_data.js"></script>
	<script type="text/javascript" src="boiler_plate/js/libs/jquery-dropdown-master/jquery.dropdown.js"></script>
	<link type="text/css" rel="stylesheet" href="boiler_plate/js/libs/jquery-dropdown-master/jquery.dropdown.css" />


	<link rel="stylesheet" href="boiler_plate/styles/App.css" />


	<script type="text/javascript" src="js/config.js"></script>
	<script type="text/javascript" src="js/sql_form_designer.js"></script>
	<script type="text/javascript" src="js/project_options.js"></script>

</head>

<body>

	<div id="dropdown-project" class="ui-widget-header ui-corner-all dropdown-menu">
		<ul>
			<li id="btn_new_project"><a>New Project</a></li>
			<li id="btn_open_project"><a>Open Project</a></li>
			<li id="btn_save_project"><a>Save Project</a></li>
			<li class="divider"><a></a></li>
			<li id="btn_json_to_table"><a>Import JSON to Table</a></li>
			<li id="btn_csv_to_table"><a>Import CSV to Table</a></li>
			<li class="divider"><a></a></li>
			<li id="btn_generate_sql"><a>SQL generation</a></li>
			<li id="btn_generate_code"><a >Javascript generation</a></li>
			<li id="btn_generate_doc"><a >Document generation</a></li>
<!--
			<li id="btn_generate_website"><a >Create Website Template</a></li>
-->
			<li id="btn_generate_web_app"><a >WebApp generation</a></li>
		</ul>
	</div>
	
	<div id="dropdown-table-list" class="ui-widget-header ui-corner-all dropdown-menu"  style="max-height:300px;overflow:auto;">
		<ul>
		</ul>
	</div>

	<div class="ui-widget project-area" id="area" style="width:4096px;height:4096px;overflow:auto"></div>

	<div id="toolbar" class="ui-widget-header" style='width:100%;padding-right:10px;position:fixed;top:0;left:0;z-index:9999;'>
		<button type="button" id="btn_project" data-dropdown="#dropdown-project" >Project</button>
		<button type="button" id="saveload" style="display:none">Save/Load</button>
		<button type="button" id="addtable">Add Table</button>
		<button type="button" id="edittable" style="display:none">Edit Table</button>
		<button type="button" id="tablekeys"  style="display:none">Keys</button>
		<button type="button" id="removetable"style="display:none" >Remove Table</button>
		<button type="button" id="aligntables" style="display:none">Align Tables</button>
		<button type="button" id="cleartables">Clear Tables</button>
		<button type="button" id="addrow" style="display:none">Add Field</button>
		<button type="button" id="editrow" style="display:none">Edit Field</button>
		<button type="button" id="uprow" style="display:none">Up</button>
		<button type="button" id="downrow" style="display:none">Down</button>
		<button type="button" id="foreigncreate" style="display:none">Foreign keys</button>
		<button type="button" id="foreignconnect" style="display:none">Foreign Key Connect</button>
		<button type="button" id="foreigndisconnect" style="display:none">Foreign Key Remove</button>
		<button type="button" id="removerow" style="display:none">Remove Field</button>
		
		<button type="button" id="table_list" data-dropdown="#dropdown-table-list" >Table List</button>
		<button type="button" id="options">Options</button>
	</div>
	
<!--
	<div id="fd-panel-id" style="position:fixed;top:40px;left:0;height:200px;width:400px;">
			<div>Form Builder</div>
			<div>
				<ul style="list-style:none">
					<li>
						<div>
							<label for="firstname">First name</label>
							<input id="firstname" type="text"/>
						</div>
					</li>
					<li>
						<div>
							<label for="surname">Surname</label>
							<input id="surname" type="text"/>
						</div>
					</li>
				</ul>
			</div>
			<div>Form Builder</div>
			<div>
				<ul style="list-style:none">
					<li>
						<div>
							<label for="firstname">First name</label>
							<input id="firstname" type="text"/>
						</div>
					</li>
					<li>
						<div>
							<label for="surname">Surname</label>
							<input id="surname" type="text"/>
						</div>
					</li>
				</ul>
			</div>			<div>Form Builder</div>
			<div>
				<ul style="list-style:none">
					<li>
						<div>
							<label for="firstname">First name</label>
							<input id="firstname" type="text"/>
						</div>
					</li>
					<li>
						<div>
							<label for="surname">Surname</label>
							<input id="surname" type="text"/>
						</div>
					</li>
				</ul>
			</div>			<div>Form Builder</div>
			<div>
				<ul style="list-style:none">
					<li>
						<div>
							<label for="firstname">First name</label>
							<input id="firstname" type="text"/>
						</div>
					</li>
					<li>
						<div>
							<label for="surname">Surname</label>
							<input id="surname" type="text"/>
						</div>
					</li>
				</ul>
			</div>			<div>Form Builder</div>
			<div>
				<ul style="list-style:none">
					<li>
						<div>
							<label for="firstname">First name</label>
							<input id="firstname" type="text"/>
						</div>
					</li>
					<li>
						<div>
							<label for="surname">Surname</label>
							<input id="surname" type="text"/>
						</div>
					</li>
				</ul>
			</div>
	</div>
-->
	<script type="text/javascript">
		jsPlumb.ready(function() {
			jsPlumb.importDefaults({
				  Endpoint				: [ "Dot", {radius:2}]
				, PaintStyle			: { lineWidth:3  }
				, HoverPaintStyle		: { strokeStyle:"red", lineWidth:7 }
			});
		});

		var designer = new SQL.Designer();
		/*
		$("#fd-panel-id ul").sortable();
		$("#fd-panel-id").fd_panel({
			  title				:"Demo Panel"
			, draggable			: true
			, showBorder		: true
			, showHeader		: true
			, canExpand			: true
			, canClose			: true
			, canResize			: true
		});
		
		$("#fd-panel-id").mousedown(function(){
			console.log(this.id+ ": mouse-down");
			toFront("#fd-panel-id");
		});
		
		var app = new Application();
		*/
	</script>
</body>
</html>
